import { useTheme } from '@mui/material/styles';
import Box from '@mui/material/Box';
import Table from '@mui/material/Table';
import TableBody from '@mui/material/TableBody';
import TableCell from '@mui/material/TableCell';
import TableContainer from '@mui/material/TableContainer';
import TableFooter from '@mui/material/TableFooter';
import TablePagination from '@mui/material/TablePagination';
import TableRow from '@mui/material/TableRow';
import Paper from '@mui/material/Paper';
import IconButton from '@mui/material/IconButton';
import FirstPageIcon from '@mui/icons-material/FirstPage';
import KeyboardArrowLeft from '@mui/icons-material/KeyboardArrowLeft';
import KeyboardArrowRight from '@mui/icons-material/KeyboardArrowRight';
import LastPageIcon from '@mui/icons-material/LastPage';
import { useState, type ChangeEvent, type MouseEvent } from 'react';
import { useSafeState } from 'ahooks';
import { alpha } from '@mui/material/styles';
import TableHead from '@mui/material/TableHead';
import TableSortLabel from '@mui/material/TableSortLabel';
import Toolbar from '@mui/material/Toolbar';
import Typography from '@mui/material/Typography';
import Checkbox from '@mui/material/Checkbox';
import Tooltip from '@mui/material/Tooltip';
import FormControlLabel from '@mui/material/FormControlLabel';
import Switch from '@mui/material/Switch';
import DeleteIcon from '@mui/icons-material/Delete';
import FilterListIcon from '@mui/icons-material/FilterList';
import { visuallyHidden } from '@mui/utils';
import { unstable_batchedUpdates } from 'react-dom';

const { max } = Math;

interface TablePaginationActionsProps {
  count: number;
  page: number;
  rowsPerPage: number;
  onPageChange: (
    event: MouseEvent<HTMLButtonElement>,
    newPage: number,
  ) => void;
}


function createData (name: string, calories: number, fat: number) {
  return { name, calories, fat };
}

const rows = [
  createData('Cupcake', 305, 3.7),
  createData('Donut', 452, 25.0),
  createData('Eclair', 262, 16.0),
  createData('Frozen yoghurt', 159, 6.0),
  createData('Gingerbread', 356, 16.0),
  createData('Honeycomb', 408, 3.2),
  createData('Ice cream sandwich', 237, 9.0),
  createData('Jelly Bean', 375, 0.0),
  createData('KitKat', 518, 26.0),
  createData('Lollipop', 392, 0.2),
  createData('Marshmallow', 318, 0),
  createData('Nougat', 360, 19.0),
  createData('Oreo', 437, 18.0),
].sort((a, b) => (a.calories < b.calories ? -1 : 1));

export default function CustomPaginationActionsTable ({ rows }: {
  readonly rows: {
    name: string;
    calories: number;
    fat: number;
  }[];
}) {
  const { length } = rows;
  const [page, setPage] = useSafeState(0);
  const [rowsPerPage, setRowsPerPage] = useSafeState(10);

  // Avoid a layout jump when reaching the last page with empty rows.
  const emptyRows = page > 0 ? max(0, (1 + page) * rowsPerPage - length) : 0;

  return (
    <TableContainer component={Paper}>
      <Table
      // sx={{ minWidth: 500 }}
      // aria-label="custom pagination table"
      >
        <TableHead>
          <TableRow>

          </TableRow>
        </TableHead>
        <TableBody>
          {(rowsPerPage > 0
            ? rows.slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage)
            : rows
          ).map((row) => {
            const { name } = row;
            return <TableRow key={name}>
              <TableCell component="th" scope="row">
                {name}
              </TableCell>
              <TableCell
              // style={{ width: 160 }}
              // align="right"
              >
                {/* {row.calories} */}
              </TableCell>
              <TableCell
              // style={{ width: 160 }}
              // align="right"
              >
                {/* {row.fat} */}
              </TableCell>
            </TableRow>;
          })}
          {emptyRows > 0 && (
            <TableRow
            // style={{ height: 53 * emptyRows }}
            >
              <TableCell
              // colSpan={6}
              />
            </TableRow>
          )}
        </TableBody>
        <TableFooter>
          <TableRow>
            <TablePagination
              //@default [10, 25, 50, 100]
              // rowsPerPageOptions={[5, 10, 25, { label: 'All', value: -1 }]}
              // colSpan={3}
              count={length}
              rowsPerPage={rowsPerPage}
              page={page}
              component='div'
              // SelectProps={{
              //   inputProps: {
              //     'aria-label': 'rows per page',
              //   },
              //   native: true,
              // }}
              onPageChange={(
                event,
                newPage,
              ) => {
                setPage(newPage);
              }}
              onRowsPerPageChange={(
                event,
              ) => {
                unstable_batchedUpdates(() => {
                  setRowsPerPage(parseInt(event.target.value, 10));
                  setPage(0);
                });
              }}
            // ActionsComponent={TablePaginationActions}
            />
          </TableRow>
        </TableFooter>
      </Table>
    </TableContainer>
  );
}
